<template>
	<div class="yh_content foSi14">
		<div class="btn-group_top mar-bott20">
			<el-button type="primary" @click.stop="back" size="small">返回会员卡列表</el-button>
		</div>
		<div class="yh_topsearch">
			<div class="yh_dis topsearch_item">
				<div class="search_left">会员卡类型</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in typeoflist" @click.stop="listClick(1,index)" :key="index" class="sons"
						:class="search.typeofid === item.id ? 'choiceme' : ''">
						{{ item.title }}({{ item.num }})
					</div>
				</div>
			</div>

			<div class="yh_xian" />
			<div class="yh_dis topsearch_item">
				<div class="search_left">会员卡种类</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in cardnamelist" @click.stop="listClick(2,index)" :key="index"
						class="sons" :class="search.cardnameid === item.id ? 'choiceme' : ''">
						{{ item.title }}({{ item.num }})
					</div>
				</div>
			</div>

			<div class="yh_xian" />
			<div class="yh_dis topsearch_item">
				<div class="search_left">会员卡状态</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in cardstatuslist" @click.stop="listClick(3,index)" :key="index"
						class="sons" :class="search.cardstatusid === item.id ? 'choiceme' : ''">
						{{ item.title }}
					</div>
				</div>
			</div>
		</div>
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
			<div>
				<div class="block yh_dis" style="margin-top: 10px">
					<div>
						<div class="demonstration yh_qs yh_font13">发卡时间</div>
						<el-date-picker v-model="search.birthday_start" style="width: 120px" size="small" type="date"
							placeholder="开始时间" />
						<el-date-picker v-model="search.birthday_end" style="width: 120px; margin-left: 5px"
							size="small" type="date" placeholder="截至日期" />
					</div>
					<div style="margin-left: 10px">
						<div class="demonstration yh_qs yh_font13">会员</div>
						<el-input v-model="search.name" style="width: 140px;" placeholder="姓名/卡号" size="small" />
					</div>
					<div style="margin-left: 10px">
						<el-button type="primary" class="mar-top20" @click.stop="getList" size="small">搜索</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="mar-top20 dis disAl mar-bott10">
			<div>当前选中<span style="color: #41c3a8;margin: 0 3px;">{{multipleSelection.length}}</span>张会员卡</div>
			<div v-if="type === 1" class="que cuPo mar-left20 coFFF" @click.stop="cardClick(1)"
				style="background: #f49352;padding: 0 10px;">批量删除会员卡</div>
			<div v-if="type === 2" class="que cuPo mar-left20 coFFF" @click.stop="cardClick(2)"
				style="background: #f49352;padding: 0 10px;">批量编辑有效期</div>
		</div>
		<div style="margin-top: 20px">
			<el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%"
				@selection-change="handleSelectionChange">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column type="selection" width="55" />
				<el-table-column prop="realname" label="持卡人" />
				<el-table-column prop="card_number" label="卡号" />
				<el-table-column prop="card_name" label="卡名称" />
				<el-table-column prop="cards_period" label="有效期至" />
				<el-table-column prop="cards_hairpin" label="发卡时间" />
				<el-table-column prop="card_state_text" label="卡状态" />
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
		<div v-if="shuaVisible !== 0" class="zhezhao wh100" />
		<div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 600px;">
				<div class="mar" style="width: 480px;">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;">
						<div class="dis disAl">
							<div v-if="shuaVisible === 1" class="foSi20 fowe600 mar-right10">批量删除会员卡</div>
							<div v-if="shuaVisible === 2" class="foSi20 fowe600 mar-right10">批量延长会员卡有效期</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="shuaVisibleClick()" />
					</div>
					<div class="mar-top10" v-if="shuaVisible === 1">
						<div class="item-l foSi16 mar-bott20" style="padding: 10px 20px;">
							确定删除已选中的{{multipleSelection.length}}张会员卡？删除后数据无法恢复，请谨慎操作
						</div>
						<el-checkbox v-model="isPopover">我同意并确定删除所选会员卡</el-checkbox>
						<div class="wid100 dis disAl disJuC foSi14 coFFF mar-top10" style="padding: 20px 0 40px">
							<div v-if="isPopover" class="mar-right20 que cuPo" style="background: #48a9f3;"
								@click.stop="delClick('del')">确认</div>
							<div v-if="!isPopover" class="mar-right20 que cuPo" style="background: #616b74;">确认</div>
							<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
						</div>
					</div>
					<div class="mar-top10" v-if="shuaVisible === 2">
						<div class="" style="padding: 20px 0;">
							<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
								<div class="wid100 dis disAl"
									style="background: #f2f2f2;min-height: 42px;padding: 5px 15px;">
									<div class="mar-right10">批量</div>
									<el-select v-model="ruleForm.yan" size="small" style="width: 80px;height: 34px;">
										<el-option v-for="(item,index) in yanList" :key="index" :label="item.label"
											:value="item.value" />
									</el-select>
									<div class="mar-left20 mar-right10">有效期</div>
									<el-form-item class="mp0" prop="youxiao">
										<el-input v-model="ruleForm.youxiao" style="width: 140px;" size="small" />
									</el-form-item>
									<div class="mar-left10">天</div>
								</div>
							</el-form>
						</div>
						<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
							<div class="mar-right20 que cuPo" style="background: #48a9f3;"
								@click.stop="submitForm('ruleForm')">确认</div>
							<div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		searchSousuo,
		cardList,
		bulkOperation
	} from '@/api/member'
	export default {
		name: 'ArticleList',
		components: {
			Pagination
		},
		data() {
			const youxiaoVal = (rule, value, callback) => {
				if (Number(value) === 0) {
					callback()
				} else if (!parseFloat(value) || value % 1 !== 0 || value < 0) {
					callback(new Error('请输入整数'))
				} else {
					callback()
				}
			}
			return {
				shuaVisible: 0,
				ruleForm: {
					yan: 1,
					youxiao: null,
				},
				rules: {
					youxiao: [{
						required: true,
						trigger: 'change',
						validator: youxiaoVal
					}],
				},
				yanList: [{
					value: 1,
					label: '延长'
				}, {
					value: 2,
					label: '减少'
				}],
				isPopover: false,
				list: null,
				total: 0,
				listLoading: false,
				cardstatuslist: [],
				cardnamelist: [],
				cardtypelist: [],
				typeoflist: [],
				search: {
					cardtypeid: 100,
					typeofid: 100,
					cardnameid: 0,
					cardstatusid: 0,
					birthday_start: '', // 发卡开始时间
					birthday_end: '', // 发卡结束时间
					validity_start: '', // 有效期开始时间
					validity_end: '', // 有效期结束时间
					source: [{
						value: 0,
						label: '不指定'
					}, {
						value: 1,
						label: '本馆发的卡'
					}, {
						value: 2,
						label: '本馆发的非通用卡'
					}], // 会员卡来源
					source_id: 0,
					balance: [{
						value: 0,
						label: '不指定'
					}, {
						value: 1,
						label: '余额为零'
					}, {
						value: 2,
						label: '余额不为零'
					}], // 余额
					balance_id: 0,
					name: null,
				},
				tableData: [],
				listQuery: {
					page: 1,
					limit: 10
				},
				multipleSelection: [],
				idlist: ''
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.type = Number(query.type)
			var xuanList = [{
				name: '会员卡批量操作',
				url: '/member/batchMCard?type=' + this.type,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getSousuoList()
		},
		methods: {
			delClick(type) {
				var params = {
					'idlist': this.idlist,
					'type': type,
					'ext_day': this.ruleForm.youxiao,
					'ext_type': this.ruleForm.yan
				}
				bulkOperation(params).then(response => {
					const {
						data
					} = response
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			back() {
				this.$router.go(-1)
			},
			cardClick(index) {
				if (this.multipleSelection.length > 0) {
					this.shuaVisible = index
				} else {
					this.$message.error('请先选择要操作的会员卡');
				}
			},
			shuaVisibleClick() {
				this.shuaVisible = 0
				this.ruleForm = {
					yan: 1,
					youxiao: null,
				}
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.delClick('ext')
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(val)
				var ids = []
				val.forEach((item) => {
					ids.push(item.id)
				})
				this.idlist = ids.join(", ");
			},
			getSousuoList() {
				searchSousuo().then(response => {
					const {
						data
					} = response
					this.cardtypelist = data.type
					this.typeoflist = data.types
					this.cardnamelist = data.cardlist
					this.cardstatuslist = data.statuslist
					this.getList()
				}).catch(error => {
					console.log(error)
				})
			},
			listClick(type, index) {
				switch (type) {
					case 0:
						this.search.cardtypeid = index
						break
					case 1:
						this.search.typeofid = index
						break
					case 2:
						this.search.cardnameid = index
						break
					case 3:
						this.search.cardstatusid = index
						break
				}
				this.getList()
			},
			getList() {
				this.listLoading = true;
				console.log(this.listQuery.limit)
				var date = {
					'page': this.listQuery.page,
					'limit': this.listQuery.limit,
					'keyword': this.search.name,
					// 'birthday_start': this.search.birthday_start,
					// 'birthday_end': this.search.birthday_end,
					'cards_period_start': this.search.validity_start,
					'cards_period_end': this.search.validity_end,
					// '': this.search.source_id,
					'balance': this.search.balance_id,
					'type': this.search.cardtypeid,
					'types': this.search.typeofid,
					'cardid': this.search.cardnameid,
					'cardstate': this.search.cardstatusid,
					'sort': this.sort
				}
				this.shuaVisibleClick()
				cardList(date).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
		}
	}
</script>

<style>
	.monitor-yt-popover {
		border: 2px solid #84878d;
		padding: 20px;
	}

	.monitor-yt-popover .popper__arrow::after {
		top: 0px !important;
		border-bottom-color: #84878d !important;
	}
</style>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
		margin-bottom: 15px;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	.btn-group_top {
		text-align: right;
	}
</style>
